<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /*希望列表中的 strong 元素变为斜体字*/
        li strong {
            font-style: italic;
            font-weight: normal;
        }
        strong {
            color: red;
        }

        h2 {
            color: red;
        }

        h2 strong {
            color: blue;
        }
        *{/*显示边框*/
            border-style: solid;
            border-color: red; /*边框的颜色*/
            border-width: thin;
        }
        /*
        属性选择器
        */
        *[title] {color:green;} /*把包含标题（title）的所有元素变为红色*/
        a[href] {color:red;}/*只针对 有 href 属性的锚（a 元素）应用样式*/
        a[href][title] {color:red;}/*还可以根据多个属性进行选择，只需将属性选择器链接在一起即可*/
        a[href="aaa"][title] {color: gold;}/*将指向 Web 服务器上某个指定文档的超链接变成红色，如果还有其它的*/
        a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}/**/
        p[class~="important"] {color: red;}/**/
    </style>
</head>
<body>
通过依据元素在其位置的上下文关系来定义样式

<p>
    <strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong>
</p>

<ol>
    <li>
        <strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong>
    </li>
    <li>我是正常的字体。</li>
</ol>

<strong>我是Strong</strong>
<h2>我是h2</h2>
<h2>
    <strong>我是 h2下的Strong</strong>
</h2>
<a title="我只有title">我只有title</a>
<a href="#">我只有href</a>
<a href="#" title="我只有title">我有title和href</a>
<a href="aaa" title="aaa">aaa</a>
</body>
</html>